import React from 'react'
import { Row, Col, Checkbox, Select, InputNumber } from 'antd'
import { PIVOT_CHART_FONT_SIZES, PIVOT_CHART_FONT_STYLE, PIVOT_CHART_LEGEND_TYPE } from 'app/globalConstants'
const Option = Select.Option
import ColorPicker from 'components/ColorPicker'
const styles = require('../Workbench.less')
import { getCorrectInputNumber } from '../../util'
//chart 图形位置

export interface IContainConfig {
  x: number,
  y: number,
  isPie: boolean
}

interface IShadowProps {
  title: string
  config: IContainConfig
  onChange: (prop: string, value: any) => void
}

export class ContainSection extends React.PureComponent<IShadowProps, {}> {
  private inputNumberChange = (prop) => (value) => {
    this.props.onChange(prop, getCorrectInputNumber(value))
  }

  public render() {
    const { title, config } = this.props
    const {
      x,
      y,
      isPie
    } = config


    return (
      <div className={styles.paneBlock}>
        <h4>{title}</h4>
        <div className={styles.blockBody}>
          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
            <Col span={3}>x轴</Col>
            <Col span={6}>
              <InputNumber
                placeholder=""
                className={styles.blockElm}
                value={x}
                min={1}
                max={100}
                onChange={this.inputNumberChange('x')}
              />
            </Col>
            {isPie ?
              < Col span={3}>%</Col> : < Col span={3}>px</Col>}
            <Col span={3}>y轴</Col>
            <Col span={6}>
              <InputNumber
                placeholder=""
                className={styles.blockElm}
                value={y}
                min={1}
                max={100}
                onChange={this.inputNumberChange('y')}
              />
            </Col>
            {isPie ?
              < Col span={3}>%</Col> : < Col span={3}>px</Col>}
          </Row>
        </div>
      </div >
    )
  }
}

export default ContainSection
